<template>
	<view class="chat-box" :style="{'minHeight':windowHeight+'px'}">
		<view class="tips color_fff size_12 align_c" :class="{ 'show':ajax.loading }" @tap="getHistoryMsg">
			{{ajax.loadText}}
		</view>
		<view class="box-1" id="list-box" v-if="talkList.length>0">
			<view class="talk-list">
				<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
					<view class="rowbox serve-end" v-if="item.classify==7">
						本次图文问诊已结束
					</view>
					<view class="rowbox serve-end" v-else-if="item.classify==14">
						开始问诊
					</view>
					<view class="rowbox serve-end" v-else-if="item.classify==15">
						{{item.friendsid==id?'对方':'您'}}撤回了一条消息
					</view>
					<view class="rowbox serve-end" v-else-if="item.classify==16">
						已退款，结束问诊
					</view>
					<view v-else class="item flex_col" :class="item.friendsid == id ? 'pull':'push' ">
						<image :src="item.friendsid == id? frendInfo.logo :'/static/img/tx.png'" mode="aspectFill"
							class="pic">
						</image>
						<view @longpress="showChehui(item.msg_id,item.friendsid)" class="content"
							v-if="item.classify==1">
							{{item.content}}
						</view>
						<image @longpress="showChshowChehui(item.msg_idfriendsid)" @click="previewImg(item.content)"
							v-else-if="item.classify==2" :src="item.content" mode="widthFix"
							style="width:200rpx;height: 200rpx;border-radius: 10rpx;margin: 0 20rpx;">
						</image>
						<view @click="showZhongyao(item)" v-else-if="item.classify==4" class="columnbox zhongyi-box">
							<view class="rowbox wdh-100 jus als" style="border-bottom: #F0F2F5 solid 1px;">
								<image style="width: 32rpx ;height: 32rpx;margin-right: 20rpx;"
									src="/static/img/moban.png" mode="widthFix">
								</image>
								<view class="columnbox als">
									<view class="wdh-100 z-title">整体治疗方案-内服中药
										<text v-if="item.paystatus==1||item.paystatus==0||!item.paystatus">(待支付)</text>
										<text v-else-if="item.paystatus==2">(已付款)</text>
										<text v-else-if="item.paystatus==3">(待收货)</text>
										<text v-else-if="item.paystatus==4">(已完成)</text>
									</view>
									<view class="z-date wdh-100">{{item.addtime}}</view>
								</view>
							</view>
							<view class="wdh-100 z-user">患者：{{item.name}}
								{{item.sex=='2'?'女':'男'}}
								（{{item.age}}岁）
							</view>
							<view class="wdh-100 z-user">诊断：{{item.title}}</view>
							<view class="wdh-100 z-notice">根据方案购买、服药，并按时复诊</view>
						</view>
						<view @click="showXiyao(item)" v-else-if="item.classify==5" class="columnbox zhongyi-box">
							<view class="rowbox wdh-100 jus als" style="border-bottom: #F0F2F5 solid 1px;">
								<image style="width: 32rpx ;height: 32rpx;margin-right: 20rpx;"
									src="/static/img/moban.png" mode="widthFix">
								</image>
								<view class="columnbox als">
									<view class="wdh-100 z-title">整体治疗方案-服用西药
										<text v-if="item.paystatus==1||item.paystatus==0">(待支付)</text>
										<text v-else-if="item.paystatus==2">(已付款)</text>
										<text v-else-if="item.paystatus==3">(待收货)</text>
										<text v-else-if="item.paystatus==4">(已完成)</text>
									</view>
									<view class="z-date wdh-100">{{item.addtime}}
									</view>
								</view>
							</view>
							<view class="wdh-100 z-user">患者：{{item.name}}
								{{item.sex=='2'?'女':'男'}}
								（{{item.age}}岁）
							</view>
							<view class="wdh-100 z-user">诊断：{{item.title}}</view>
							<view class="wdh-100 z-notice">根据方案购买、服药，并按时复诊</view>
						</view>
						<view class="rowbox goods-box spb" v-else-if="item.classify==6" @click="showRegGoods(item)">
							<view class="columnbox als">
								<view class="goods-r">商品推荐</view>
								<view class="goods-desc">点击查看商品推荐详情</view>
							</view>
							<image class="goods-img" src="/static/img/wdcf.svg" mode="aspectFill"></image>
						</view>

						<view class="rowbox goods-box spb" v-else-if="item.classify==11"
							@click="showBingliDetail(item)">
							<view class="columnbox als">
								<view class="goods-r">电子病历已生成</view>
								<view class="goods-desc">点击查看详情</view>
							</view>
							<image class="goods-img" src="/static/img/wdcf.svg" mode="aspectFill"></image>
						</view>

						<view v-else-if="item.classify==17" class="columnbox zhongyi-box">
							<view class="rowbox wdh-100 jus als" style="border-bottom: #F0F2F5 solid 1px;">
								<image style="width: 32rpx ;height: 32rpx;margin-right: 20rpx;"
									src="/static/img/moban.png" mode="widthFix">
								</image>
								<view class="columnbox als">
									<view class="wdh-100 z-title" style="padding-bottom: 20rpx;">病情描述
										<!-- 	<text v-if="item.paystatus==1||item.paystatus==0">(待支付)</text>
										<text v-else-if="item.paystatus==2">(已付款)</text>
										<text v-else-if="item.paystatus==3">(待收货)</text>
										<text v-else-if="item.paystatus==4">(已完成)</text> -->
									</view>
								</view>
							</view>
							<view class="wdh-100 z-userd">就诊人：{{item.name}}</view>
							<view class="wdh-100 z-userd">病情和症状：{{item.content}}</view>
							<view class="wdh-100 z-userd">过敏史：{{item.guominshi==1?'无':'有'}}</view>
							<view class="wdh-100 z-userd">肝/肾功能：{{item.ganshen==1?'正常':'异常'}}</view>
							<view class="wdh-100 z-userd">状态：
								<text v-if="item.puru==1">无</text>
								<text v-else-if="item.puru==2">备孕</text>
								<text v-else-if="item.puru==3">妊娠</text>
								<text v-else-if="item.puru==4">哺乳</text>
							</view>
							<view v-if="item.images!=''" class="describe-img-list">
								<image @click.stop="previewDescribeImg(indexs,item.images)"
									v-for="(items,indexs) in item.images.split(',')" :key='indexs' :src="items"
									mode="aspectFill" class="describe-img"></image>
							</view>
							<!-- <view class="wdh-100 z-notice">根据方案购买、服药，并按时复诊</view> -->
						</view>

						<view @longpress="showChshowChehui(item.msg_idfriendsid)" @click="onPlay(item)"
							class="rowbox content" v-else-if="item.classify==3">
							<view class="box" :class="{'playvoice':playurl==item.content}">
								<view class="box1">
									<view class="box2">
										<view class="box3">
											<view class="box4">
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 键盘占位 -->
		<view class="wdh-100" :style="{height:KeyBoardHeight+100+'px'}"></view>

		<view class="box-2" :style="{'bottom':KeyBoardHeight+'px'}">
			<view class="rowbox wdh-100 spb tw-box" @click="toPay"
				v-if="this.talkList.length==0||this.talkList[this.talkList.length - 1].classify == 7||this.talkList[this.talkList.length - 1].classify == 16">
				<view class="rowbox">
					<image src="/static/img/twwz.svg" mode="widthFix" class="tw-img"></image>
					<view class="columnbox als">
						<view class="tw-title">图文问诊 </text> </view>
						<view class="tw-gt">图文多轮沟通</view>
					</view>
				</view>
				<view class="rowbox wz-btn">点此问诊</view>
			</view>
			<view class="flex_col" v-else>
				<image @click="onRecorderchange(true)" v-if="!voiceflag" src="/static/img/messagesound.svg"
					mode="widthFix" style="width: 70rpx;height: 70rpx;margin-right: 20rpx;"></image>
				<image @click="onRecorderchange(false)" v-else src="/static/img/jianpan.svg" mode="widthFix"
					style="width: 70rpx;height: 70rpx;margin-right: 20rpx;"></image>
				<!-- 键盘输入 -->
				<view class="flex_grow" v-if="!voiceflag">
					<input :adjust-position="false" @blur="KeyBoardHeight=0" @keyboardheightchange="getKeyBoardHeight"
						confirm-type="send" @confirm="send" type="text" class="content" style="background: #f0f2f5;"
						v-model="content" placeholder="请输入聊天内容" placeholder-style="color:#6d7072;" :cursor-spacing="6">
				</view>
				<!-- 语音输入 -->
				<view class="flex_grow" v-else>
					<talkbox ref="talk" @change='sendVoice'></talkbox>
				</view>
				<image @click="addImg" src="/static/img/messageadd.svg" mode="widthFix"
					style="width: 70rpx;height: 70rpx;margin-left: 20rpx;"></image>
				<!-- <button class="def-bgcol send" @tap="send">发送</button> -->
			</view>
		</view>
		<u-popup :duration="100" mode="bottom" :show='chehuiflag' @close="chehuiflag=false">
			<view @click="chehuiCurMessage" class="rowbox wdh-100" style="font-size: 32rpx;padding: 50rpx 0;">撤回消息
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 环信即时通讯
	import SDK from 'js_sdk/easemob-im-uni-app/Easemob-chat';
	// 实例化 SDK 对象
	const WebIM = wx.WebIM = SDK;


	import talkbox from './talk.vue'
	import getdate from '@/utils/time.js'
	var selector = ''
	export default {
		components: {
			talkbox
		},
		data() {
			return {
				connectcount: 0,
				playflag: false,
				playurl: '',
				bgAudioManager: null,
				voiceflag: false,
				talkList: [],
				ajax: {
					rows: 10, //每页数量
					page: 1, //页码
					flag: true, // 请求开关
					loading: true, // 加载中
					loadText: '正在获取消息'
				},
				content: '',
				id: '',
				chatlosgo: '',
				mylogo: '',
				frendInfo: '', //对方信息
				windowHeight: 0,
				submitflag: false,
				curid: '', //当前选择消息
				chehuiflag: false, //撤回
				KeyBoardHeight: 0,
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getHistoryMsg();
			});
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			isLogin() {
				return this.$store.state.isLogin
			},
			newChat() {
				return this.$store.state.newChat;
			},
		},

		watch: {
			newChat(newValue, oldValue) {
				console.log('接收到新消息=====', newValue)
				this.setMessage(newValue)
			}
		},


		onLoad(options) {
			this.id = options.id * 1
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			})
			this.getFrendDetail()
		},
		onPageScroll(e) {
			if (e.scrollTop < 5) {
				this.getHistoryMsg();
			}
		},
		methods: {
			showBingliDetail(v) {
				uni.navigateTo({
					url: '/packageA/chatInfo/bingli?id=' + v.otherid
				})
			},
			previewDescribeImg(index, url) {
				uni.previewImage({
					urls: url.split(','),
					current: index
				})
			},
			showRegGoods(v) {
				uni.navigateTo({
					url: '/packageA/chatInfo/goods?id=' + v.otherid
				})
			},
			getKeyBoardHeight(e) {
				this.KeyBoardHeight = e.detail.height
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
						duration: 0
					});
				}, 500)
			},
			// 确认撤回消息
			chehuiCurMessage() {
				this.chehuiflag = false
				this.sendMessage(this.curid, 15)
			},
			// 撤回消息
			showChehui(id, vid) {
				console.log(id)
				if (vid != this.id) {
					this.curid = id
					this.chehuiflag = true
				}
			},
			// 查看西药
			showXiyao(v) {
				uni.navigateTo({
					url: '/packageA/chatInfo/xiyao?id=' + v.otherid
				})
			},
			// 查看中药
			showZhongyao(v) {
				uni.navigateTo({
					url: '/packageA/chatInfo/zhongyao?id=' + v.otherid
				})
			},
			sendMessage(content, classify) {
				this.toolflag = false
				// uni.showLoading({
				// 	title: ''
				// })
				let infocontent = {
					classify: classify,
					content: content,
					otherid: typeof(content) == 'number' ? parseInt(content) : 0, //开方ID
					name: this.frendInfo.name,
					chatroomheadpic: this.frendInfo.logo
				}
				let option = {
					type: "txt",
					msg: JSON.stringify(infocontent),
					to: this.id + "",
					chatType: "singleChat",
				};
				console.log('发送消息=======', option)
				let msg = WebIM.message.create(option);
				getApp().globalData.conn.send(msg).then(res => {
					console.log("=========Send message success==接收消息===", res);
					// uni.hideLoading()

					if (classify == 1) {
						this.content = ''
					}
					if (classify == 15) {
						setTimeout(() => {
							this.ajax = {
								rows: 10, //每页数量
								page: 1, //页码
								flag: true, // 请求开关
								loading: true, // 加载中
								loadText: '正在获取消息'
							}
							this.talkList = []
							this.getHistoryMsg()
							uni.pageScrollTo({
								scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
								duration: 0
							});
						}, 500);
					} else {
						this.$store.dispatch('actionsHandleNewChatChange', {
							msg: JSON.stringify(infocontent),
							from: this.id + '',
							time: Date.parse(new Date),
							chatdetailflag: true,
							id: res.serverMsgId
						});
					}
				}).catch((e) => {
					console.log("==============Send message fail", e);
				});
			},

			sendVoice(v) {
				if (this.talkList.length == 0) {
					if (this.frendInfo.fwprice == 0) {

					} else {
						this.toPay()
						return false
					}
				} else if (this.talkList[this.talkList.length - 1].classify == 7 || this.talkList[this.talkList.length - 1]
					.classify == 16) {
					if (this.frendInfo.fwprice == 0) {

					} else {
						this.toPay()
						return false
					}
				}
				this.sendMessage(v, 3)
			},
			onPlay(v) {
				console.log(v)
				if (this.bgAudioManager) {
					this.bgAudioManager = null
				}
				this.bgAudioManager = uni.createInnerAudioContext()
				this.bgAudioManager.src = v.content
				this.bgAudioManager.play()
				this.bgAudioManager.onPlay(() => {
					this.playflag = true
					this.playurl = v.content
				})
				this.bgAudioManager.onEnded(() => {
					this.playflag = false
					this.playurl = ''
					this.bgAudioManager.offPlay()
					this.bgAudioManager.offEnded()
					this.bgAudioManager = null
				})
			},
			onRecorderchange(e) {
				this.voiceflag = e
				this.$nextTick(() => {
					this.$refs.talk.onRecorderchange()
				})
			},
			getKaifang(v) {
				return new Promise((resolve) => {
					if (v.classify == 4) {
						this.$req.post('/doctor/prescriptioninfo', {
							id: v.content * 1
						}).then(res => {
							// resolve(res.data.data.prescription)
							resolve(res.data.data)
						})
					} else {
						this.$req.post('/doctor/prescriptionxyinfo', {
							id: v.content * 1
						}).then(res => {
							// resolve(res.data.data.prescriptionxy)
							resolve(res.data.data)
						})
					}
				})
			},
			previewImg(url) {
				uni.previewImage({
					urls: [url],
					current: url
				})
			},
			toPay() {
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({
						title: ''
					})
					if (this.frendInfo.fwprice == 0) {
						this.$req.post('/user/wechatwzpay', {
							uid: uni.getStorageSync('uid'),
							doctorid: this.frendInfo.id
						}).then(res => {
							// this.$req.post('/user/patientadd', {
							// 	id: this.id,
							// 	uid: uni.getStorageSync('uid')
							// }).then(res => {
							// 	this.submitflag = false
							// 	uni.hideLoading()
							// })
							this.submitflag = false
							uni.hideLoading()
							this.sendMessage('开始问诊', 14)
							uni.redirectTo({
								url: '/pages/chat/describe?id=' + this.id
							})
						})
					} else {
						this.$req.post('/user/wechatwzpay', {
							uid: uni.getStorageSync('uid'),
							doctorid: this.frendInfo.id
						}).then(res => {
							if (res.data.code == 0) {
								var info = JSON.parse(res.data.data)
								delete info.appId
								uni.requestPayment({
									provider: 'wxpay',
									...info,
									// timeStamp: info.timeStamp + '',
									// nonceStr: info.nonceStr,
									// package: info.packages,
									// signType: info.signType,
									// paySign: info.paySign,
									success: res => {
										uni.showToast({
											title: '支付成功'
										})
										// this.$req.post('/user/patientadd', {
										// 	id: this.id,
										// 	uid: uni.getStorageSync('uid')
										// }).then(res => {})
										this.sendMessage('开始问诊', 14)
										uni.redirectTo({
											url: '/pages/chat/describe?id=' + this.id
										})
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									},
									complete() {
										this.submitflag = false
										uni.hideLoading()
									}
								});
							} else {
								uni.hideLoading()
								this.submitflag = false
								uni.showModal({
									title: '支付失败',
									content: res.data.msg
								})
							}


							// uni.request({
							// 	url: `https://zhongyi.weizi000.cn/user/wenzhenpaycs?orderid=${res.data.order.id}`,
							// 	method: 'GET',
							// 	success: (res) => {
							// 		uni.showToast({
							// 			title: '支付成功'
							// 		})
							// 		this.$req.post('/user/patientadd', {
							// 			id: this.id,
							// 			uid: uni.getStorageSync('uid')
							// 		}).then(res => {})
							// 		this.sendMessage('开始问诊', 14)
							// 	}
							// })
						})
					}
				}
			},
			addImg() {
				if (this.talkList.length == 0) {
					if (this.frendInfo.fwprice == 0) {

					} else {
						this.toPay()
						return false
					}
				} else if (this.talkList[this.talkList.length - 1].classify == 7 || this.talkList[this.talkList.length - 1]
					.classify == 16) {
					if (this.frendInfo.fwprice == 0) {

					} else {
						this.toPay()
						return false
					}
				}
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.showLoading({
							title: ''
						})
						this.$req.uploadImg(res.tempFilePaths[0]).then(res => {
							console.log(res.data.data)
							uni.hideLoading()
							this.sendMessage(res.data.data, 2)

						})
					}
				})
			},
			// 获取历史消息
			getHistoryMsg() {
				if (this.ajax.flag) {
					this.$req.post('/user/chatDetail', {
						memberid: uni.getStorageSync('memberid'),
						userid: this.id,
						pageNo: this.ajax.page,
						pageSize: this.ajax.rows
					}).then(res => {
						if (res.data.data) {
							if (res.data.data) {

							} else {
								res.data.data = []
							}
							this.setMessageList(res.data.data.reverse())
						} else {
							this.ajax.loading = false;
						}
					})
				}
			},
			async setMessageList(data) {
				if (data) {
					for (var i = 0; i < data.length; i++) {
						let msg = JSON.parse(data[i].content)
						msg.friendsid = data[i].friendsid
						msg.msg_id = data[i].msg_id
						msg.classify = data[i].classify
						if (msg.classify == 4 || msg.classify == 5) {
							// data[i].detail = await this.getKaifang(data[i])
							msg.addtime = getdate.toLocalDate(data[i].addtime / 1000)
							msg.paystatus = data[i].paystatus
						}
						data[i] = msg
					}
					if (this.ajax.page > 1) {
						// 非第一页，则取历史消息数据的第一条信息元素
						selector = `#msg-${this.talkList[0].id}`;
					} else {
						// 第一页，则取当前消息数据的最后一条信息元素
						selector = `#msg-${data[data.length-1].id}`;
					}
					selector = `#msg-${data[data.length-1].id}`;
					this.talkList = [...data, ...this.talkList];
					this.$nextTick(() => {
						// 设置当前滚动的位置
						setTimeout(() => {
							this.setPageScrollTo(selector);
						}, 200)
						this.hideLoadTips(true);
						if (data.length < this.ajax.rows) {
							this.ajax.flag = false
						} else {
							this.ajax.page++;
							// 延迟 200ms ，以保证设置窗口滚动已完成
							setTimeout(() => {
								this.ajax.flag = true;
							}, 200)
						}

					})
				} else {
					this.ajax.flag = false
					this.hideLoadTips(true);
				}
			},

			getFrendDetail() {
				this.$req.post('/user/doctorxx', {
					memberid: this.id
				}).then(res => {
					this.frendInfo = res.data.data.user
					uni.setNavigationBarTitle({
						title: res.data.data.user.name
					})
				})
			},
			async setMessage(message) {
				let info = JSON.parse(message.msg)
				info.msg_id = message.id
				info.friendsid = message.chatdetailflag ? uni.getStorageSync('memberid') : parseInt(message.from)
				if (info.classify == 4 || info.classify == 5) {
					// info.detail = await this.getKaifang(info)
					let kaifangdetail = await this.getKaifang(info)
					info = {
						...info,
						...kaifangdetail
					}
					info.addtime = getdate.toLocalDate(message.time / 1000)
					this.talkList.push(info);
				} else {
					this.talkList.push(info);
				}
				this.$nextTick(() => {
					// 清空内容框中的内容
					this.content = '';
					uni.pageScrollTo({
						scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
						duration: 0
					});
				})
			},

			// 拼接历史记录消息，正式项目可替换为请求历史记录接口
			joinHistoryMsg() {
				let join = () => {
					let arr = [];
					//通过当前页码及页数，模拟数据内容
					let startIndex = (this.ajax.page - 1) * this.ajax.rows;
					let endIndex = startIndex + this.ajax.rows;
					for (let i = startIndex; i < endIndex; i++) {
						let type = Math.random()
						arr.push({
							"id": i, // 消息的ID
							"content": `这是历史记录的第${i+1}条消息`, // 消息内容
							"type": type > 0.5 ? 1 : 0, // 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
							"pic": type > 0.5 ?
								"https://img2.baidu.com/it/u=1355255152,3994738782&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" :
								"https://c-ssl.duitang.com/uploads/blog/202311/20/OoSwoEzqS6pm9Bb.png" // 头像
						})
					}

					/*
						颠倒数组中元素的顺序。将最新的数据排在本次接口返回数据的最后面。
						后端接口按 消息的时间降序查找出当前页的数据后，再将本页数据按消息时间降序排序返回。
						这是数据的重点，因为页面滚动条和上拉加载历史的问题。
					 */
					arr.reverse();

					return arr;
				}

				// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
				return new Promise((done, fail) => {
					// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
					setTimeout(() => {
						let data = join();
						done(data);
					}, 1500);
				})
			},
			// 设置页面滚动位置
			setPageScrollTo(selector) {
				let view = uni.createSelectorQuery().in(this).select(selector);
				view.boundingClientRect((res) => {
					uni.pageScrollTo({
						scrollTop: 999999, // -30 为多显示出大半个消息的高度，示意上面还有信息。
						// scrollTop: res.top - 30, // -30 为多显示出大半个消息的高度，示意上面还有信息。
						duration: 0
					});
				}).exec();
			},
			// 隐藏加载提示
			hideLoadTips(flag) {
				if (flag) {
					this.ajax.loadText = '消息获取成功';
					setTimeout(() => {
						this.ajax.loading = false;
					}, 300);
				} else {
					this.ajax.loading = true;
					this.ajax.loadText = '正在获取消息';
				}
			},
			// 发送信息
			send() {
				if (this.talkList.length == 0) {
					if (this.frendInfo.fwprice == 0) {

					} else {
						this.toPay()
						return false
					}
				} else if (this.talkList[this.talkList.length - 1].classify == 7 || this.talkList[this.talkList.length - 1]
					.classify == 16) {
					if (this.frendInfo.fwprice == 0) {

					} else {
						this.toPay()
						return false
					}
				}
				if (!this.content) {
					uni.showToast({
						title: '请输入有效的内容',
						icon: 'none'
					})
					return;
				}
				this.sendMessage(this.content, 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-box {
		background: #F0F2F5;
		font-size: 28rpx;
		box-sizing: border-box;
		color: #333;
		letter-spacing: 0;
		word-wrap: break-word;
		padding-bottom: 70rpx;
		font-family: PingFang SC;
	}

	/* 设置常用元素尺寸规则 */
	view,
	textarea,
	input,
	label,
	form,
	button,
	image {
		box-sizing: border-box;
	}

	/* 按钮样式处理 */
	button {
		font-size: 28rpx;
	}

	/* 取消按钮默认的边框线效果 */
	button:after {
		border: none;
	}

	/* 设置图片默认样式，取消默认尺寸 */
	image {
		display: block;
		height: auto;
		width: auto;
	}

	/* 输入框默认字体大小 */
	textarea,
	input {
		font-size: 28rpx;
	}

	;

	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 行式弹性盒子 */
	.flex_row {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		flex-wrap: wrap;
	}

	/* 弹性盒子居中对齐 */
	.flex_col.flex_center,
	.flex_row.flex_center {
		justify-content: center;
	}

	/* 列式弹性盒子两端对齐 */
	.flex_col.flex_space {
		justify-content: space-between;
	}

	/* 弹性盒子快速分栏 ,这里非常郁闷 uniapp 居然不支持 * 选择器 */
	.flex_col.flex_col_2>view {
		width: 50%;
	}

	.flex_col.flex_col_3>view {
		width: 33.33333%;
	}

	.flex_col.flex_col_4>view {
		width: 25%;
	}

	.flex_col.flex_col_5>view {
		width: 20%;
	}

	.flex_col.flex_col_6>view {
		width: 16.66666%;
	}

	/* 字体颜色 */
	.color_333 {
		color: #333;
	}

	.color_666 {
		color: #666;
	}

	.color_999 {
		color: #999;
	}

	.color_ccc {
		color: #ccc;
	}

	.color_fff {
		color: #fff;
	}

	.color_6dc {
		color: #6dca6d;
	}

	.color_d51 {
		color: #d51917;
	}

	.color_09f {
		color: #0099ff;
	}

	/* 背景色*/
	.bg_fff {
		background-color: #ffffff;
	}

	/* 字体大小 */
	.size_10 {
		font-size: 20rpx;
	}

	.size_12 {
		font-size: 24rpx;
	}

	.size_14 {
		font-size: 28rpx;
	}

	.size_16 {
		font-size: 32rpx;
	}

	.size_18 {
		font-size: 36rpx;
	}

	.size_20 {
		font-size: 40rpx;
	}

	/* 字体加粗 */
	.font_b {
		font-weight: bold;
	}

	/* 对齐方式 */
	.align_c {
		text-align: center;
	}

	.align_l {
		text-align: left;
	}

	.align_r {
		text-align: right;
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 100;
	}

	/* 弹窗 */
	.shade_box {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		z-index: 101;
		min-width: 200rpx;
		min-height: 200rpx;
	}

	/* 加载数据提示 */
	.tips {
		position: fixed;
		left: 0;
		top: var(--window-top);
		width: 100%;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform: translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;

		&.show {
			transform: translateY(0);
		}
	}

	.box-1 {
		width: 100%;
		height: auto;
		padding-bottom: 100rpx;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.box-2 {
		position: fixed;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 2;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		// background-color: #F3F3F3;
		background: #fff;

		/* 兼容iPhoneX */
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		>view {
			padding: 0 20rpx;
			height: 100rpx;
		}

		.button-box {
			height: 90rpx;
			background: #f7f7f7;

			.jswz-btn {
				width: 170rpx;
				height: 50rpx;
				font-size: 28rpx;
				border: #d7dada solid 1px;
				border-radius: 10rpx;
				background: #fff;
			}
		}

		.content {
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
		}

		.send {
			width: 120rpx;
			height: 64rpx;
			line-height: 62rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: bold;
			color: #fff;
			margin-left: 20rpx;

			&:active {
				background: linear-gradient(139deg, #18e690 0%, #37dbe3 100%);
			}
		}
	}

	.talk-list {
		padding-bottom: 20rpx;

		/* 消息项，基础类 */
		.item {
			padding: 20rpx 20rpx 0 20rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;
			margin-bottom: 20rpx;

			.pic {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content {
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}


			/* 收到的消息 */
			&.pull {
				.content {
					margin-left: 32rpx;
					background-color: #fff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}

				.box {
					width: 36rpx;
					height: 36rpx;
					border-top-right-radius: 100rpx;
					-webkit-transform: rotateZ(45deg) scale(.7);
					// animation: obox linear 1s 5000;
					margin: 0 20rpx;


					@keyframes obox {
						0% {
							background: #fff;
						}

						33% {
							background: #fff;
						}

						66% {
							background: #00b6b2;
						}

						100% {
							background: #fff;
						}
					}

					@-webkit-keyframes obox {
						0% {
							background: #fff;
						}

						33% {
							background: #fff;
						}

						66% {
							background: #00b6b2;
						}

						100% {
							background: #fff;
						}
					}

					.box1 {
						width: 36rpx;
						height: 36rpx;
						background-color: #00b6b2;
						position: absolute;
						left: 0;
						bottom: 0px;
						border-top-right-radius: 100rpx;
					}

					.box2 {
						width: 30rpx;
						height: 30rpx;
						background: #fff;
						position: absolute;
						left: 0;
						bottom: 0px;
						border-top-right-radius: 100rpx;
						// animation: obox2 linear 1s 5000;
					}

					@keyframes obox2 {
						0% {
							background: #fff;
						}

						33% {
							background: #00b6b2;
						}

						66% {
							background: #fff;
						}

						100% {
							background: #fff;
						}
					}

					@-webkit-keyframes obox2 {
						0% {
							background: #fff;
						}

						33% {
							background: #fff;
						}

						66% {
							background: #00b6b2;
						}

						100% {
							background: #fff;
						}
					}

					.box3 {
						width: 20rpx;
						height: 20rpx;
						background-color: #00b6b2;
						position: absolute;
						left: 0;
						bottom: 0px;
						border-top-right-radius: 100rpx;
					}

					.box4 {
						width: 10rpx;
						height: 10rpx;
						background: #fff;
						position: absolute;
						left: 0;
						bottom: 0px;
						border-top-right-radius: 100rpx;
					}
				}

				.playvoice {
					animation: obox linear 1s 5000;

					.box2 {
						animation: obox2 linear 1s 5000;
					}
				}
			}

			/* 发出的消息 */
			&.push {
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;
				color: #fff;

				.content {
					margin-right: 32rpx;
					background: #00b6b2;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #00b6b2;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}

				.box {
					width: 36rpx;
					height: 36rpx;
					border-top-right-radius: 100rpx;
					-webkit-transform: rotateZ(220deg) scale(.7);
					// animation: obox linear 1s 5000;
					margin: 0 20rpx;


					@keyframes obox {
						0% {
							background: #00b6b2;
						}

						33% {
							background: #00b6b2;
						}

						66% {
							background: red
						}

						100% {
							background: #00b6b2;
						}
					}

					@-webkit-keyframes obox {
						0% {
							background: #00b6b2;
						}

						33% {
							background: #00b6b2;
						}

						66% {
							background: none;
						}

						100% {
							background: #00b6b2;
						}
					}

					.box1 {
						width: 36rpx;
						height: 36rpx;
						background-color: white;
						position: absolute;
						left: 0;
						bottom: 0px;
						border-top-right-radius: 100rpx;
					}

					.box2 {
						width: 30rpx;
						height: 30rpx;
						background: #00b6b2;
						position: absolute;
						left: 0;
						bottom: 0px;
						border-top-right-radius: 100rpx;
						// animation: obox2 linear 1s 5000;
					}

					@keyframes obox2 {
						0% {
							background: #00b6b2;
						}

						33% {
							background: none;
						}

						66% {
							background: #00b6b2;
						}

						100% {
							background: #00b6b2;
						}
					}

					@-webkit-keyframes obox2 {
						0% {
							background: #00b6b2;
						}

						33% {
							background: #00b6b2;
						}

						66% {
							background: none;
						}

						100% {
							background: #00b6b2;
						}
					}

					.box3 {
						width: 20rpx;
						height: 20rpx;
						background-color: white;
						position: absolute;
						left: 0;
						bottom: 0px;
						border-top-right-radius: 100rpx;
					}

					.box4 {
						width: 10rpx;
						height: 10rpx;
						background: #00b6b2;
						position: absolute;
						left: 0;
						bottom: 0px;
						border-top-right-radius: 100rpx;
					}
				}

				.playvoice {
					animation: obox linear 1s 5000;

					.box2 {
						animation: obox2 linear 1s 5000;
					}
				}
			}
		}
	}

	.zhongyi-box,
	.goods-box {
		width: 520rpx;
		background: #fff;
		margin: 0 20rpx;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		color: #000;

		.z-title {
			font-size: 28rpx;
		}

		.z-date {
			font-size: 24rpx;
			color: #aeaeae;
			margin-top: 10rpx;
			padding-bottom: 20rpx;
		}

		.z-user {
			border-bottom: #F0F2F5 solid 1px;
			padding: 20rpx 0;
		}

		.z-userd {
			margin-top: 10rpx;
		}

		.z-notice {
			color: #aeaeae;
			margin-top: 20rpx;
		}
	}

	.goods-box {
		.goods-r {
			font-size: 32rpx;
		}

		.goods-desc {
			font-size: 24rpx;
			margin-top: 20rpx;
			color: #919393;
		}

		.goods-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
	}

	.serve-end {
		background: #d0d1d3;
		width: 450rpx;
		margin: 40rpx 0;
		margin-left: 150rpx;
		color: #fff;
		height: 62rpx;
		border-radius: 2rpx;
		font-size: 24rpx;
	}

	.tw-box {
		background: #fff;
		padding: 32rpx 32rpx;
		border-radius: 20rpx;
		margin: 20rpx 0;

		.tw-img {
			width: 90rpx;
			height: 90rpx;
			margin-right: 20rpx;
		}

		.tw-title {
			color: #505052;
			font-size: 29rpx;
			font-weight: bold;

			text {
				font-size: 24rpx;
				color: #ff6637;
				margin-left: 10rpx;
			}
		}

		.tw-gt {
			font-size: 24rpx;
			color: #959499;
			margin-top: 10rpx;
		}

		.wz-btn {
			background: linear-gradient(to right, #ffa653, #ff6c41);
			color: #fff;
			border-radius: 100rpx;
			padding: 10rpx 32rpx;
			font-size: 24rpx;
			line-height: 32rpx;
		}
	}

	.describe-img-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.describe-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}
</style>